<template>
	<view class="bbs-wrapper">
		<!-- 搜索 -->
		<view class="header-wrapper">
			<view class="left">
				<u-icon name="arrow-left" color="#000000" size="20" @click="fh()"></u-icon>
			</view>
			<view class="conten">
				<u-search :showAction="false" placeholder="请输入关键词..." v-model="keyword" shape="square"></u-search>
			</view>
			<view class="right">
				<u-icon name="plus-circle" color="#000000" size="20"></u-icon>
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="his-wrapper">
			<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
				<view id="demo1" class="scroll-view-item_H demo-text-1" v-for="item in hisList" :key="item.id">
					<view class="box">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- title -->
		<view class="title">
			<view class="left">
				总帖子 <span>200</span>
			</view>
			<view class="left">
				总用户 <span>200</span>
			</view>
		</view>
		<!-- 帖子 -->
		<view class="lang" v-for="item in list" :key="item.id" @click="tiao(item.id)">
			<!-- 用户 -->
			<view class="h-boxx">
				<view class="h-box">
					<image :src="item.user.avatar?item.user.avatar :'../../static/article-active.png'" mode=""></image>
				</view>
				<view class="right">
					<view class="zi1">
						{{item.user.name}}
					</view>
					<view class="zi2">
						{{item.user.sex}}
					</view>
				</view>
				<view class="jhbox">
					<view class="jh" v-if="item.is_top==1">
						精华
					</view>
				</view>
			</view>

			<view class="content">
				{{item.desc.text}}
				<view class="img" v-if="item.desc.images.length != 0">
					<image :src="item.desc.images"></image>
				</view>
			</view>
			<view class="footer">
				<view class="left">
					<u-icon name="chat" color="black" size="20"></u-icon>
					{{item.comment_count==1?'评论':item.comment_count}}<!-- == 评论 -->
					<u-icon name="heart" color="black" size="20"></u-icon>
					{{item.support_count==0?'喜欢':item.support_count}}
				</view>
				<view class="right">{{item.created_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bbsList,
		bbshisList
	} from "../api/bbs.js"
	export default {
		data() {
			return {
				list: [], //总数居
				hisList: [], //历史数据
				page: 1,
				keyword: "",
				bbs_id: 0
			}
		},
		onLoad() {
			this.getList()
			this.gethisList()
		},
		methods: {
			tiao(id) {
				uni.navigateTo({
					url: `../post-detail/post-detail?id=${id}`
				})
			},
			//返回上一级
			fh() {
				uni.navigateBack({
					delta: 1
				})
			},
			//渲染社区列表
			async getList() {
				const res = await bbsList({
					page: this.page,
					keyword: this.keyword,
					bbs_id: this.bbs_id
				})
				console.log(res, "社区列表")
				this.count = Math.ceil(res.data.data.count / 10)
				this.list = [...this.list, ...res.data.data.rows];
			},
			//渲染历史记录
			async gethisList() {
				const res = await bbshisList({
					page: this.page,
				})
				console.log(res, "历史")
				this.hisList = res.data.data.rows
			}

		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			//注意数据最好清空下，刷新后只展示第1页的内容
			this.list = []
			this.page = 1
			this.getList();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			console.log('到底了');
			console.log(this.page, this.count);
			if (this.page < this.count) {
				this.page++
				this.getList()
			} else {
				wx.showToast({
					title: '到最后一页了',
				})
			}
		},
	}
</script>


<style lang="scss">
	.bbs-wrapper {
		width: 100%;
		height: 100%;
		background-color: #f5f5f3;

		.lang {
			width: 100%;
			background-color: white;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 15rpx;

			.content {
				margin-top: 10rpx;
				font-size: 35rpx;

				.img {
					display: flex;
					flex-wrap: wrap;

					image {
						width: 230rpx;
						height: 200rpx;
					}
				}
			}

			.footer {
				width: 100%;
				height: 80rpx;
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 30rpx;
					display: flex;

					.u-icon {
						margin-left: 8rpx;
					}
				}

				.right {
					display: flex;
					justify-content: flex-end;
					font-size: 31rpx;
					color: #6c757d;
				}
			}

			.h-boxx {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;

				.h-box {
					height: 90rpx;
					width: 90rpx;
					border-radius: 50%;
					background-color: white;
					margin-right: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.jhbox {
					height: 100%;
					width: 90rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.jh {
						width: 85rpx;
						height: 50rpx;
						color: #fff;
						background-color: #ffc107;
						padding: 5rpx;
						font-size: 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				}

				.right {
					flex: 1;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.zi1 {
						font-size: 35rpx;
						font-weight: 600;
						color: #007bff;
					}

					.zi2 {
						width: 100%;
						margin-top: 10rpx;
						font-size: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #6c757d;
					}
				}
			}
		}

		// 头部自定义
		.header-wrapper {
			width: 100%;
			height: 120rpx;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 10%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.conten {
				width: 100%;
				display: flex;
				justify-content: center;

				.u-search {
					width: 90%;
				}
			}

			.right {
				width: 10%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		//历史记录
		.his-wrapper {
			width: 100%;
			height: 100rpx;
			background-color: white;
			padding: 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.scroll-view_H {
				white-space: nowrap;
			}

			.scroll-view-item {
				height: 100%;
			}

			.scroll-view-item_H {
				display: inline-block;

				.box {
					height: 70rpx;
					border: #dee2e6 1px solid;
					border-radius: 8rpx;
					font-size: 36rpx;
					background-color: #f8f9fa;
					color: #6c757d;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}
			}
		}

		.title {
			margin-top: 15rpx;
			width: 100%;
			height: 90rpx;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 50%;
				height: 100%;
				font-size: 38rpx;
				font-weight: 600;
				color: #6c757d;
				display: flex;
				justify-content: center;
				align-items: center;

				span {
					font-weight: 0 !important;
					margin-left: 18rpx;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
